<template>
    <div id="gameDetail">
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="!requestComplete">
            <loading></loading>
        </div>
        <div class="gameDetail-con" ref="gameDetailWrapper">
            <div class="top">
                <div class="nav" ref="navBar">
                    <div class="nav-bar" v-show="showBar" >
                        <i class="icon iconfont" @click="routerBack">&#xe72d;</i>
                        <i class="share iconfont" @click="share">&#xe633;</i>
                    </div>
                    <div class="nav-bar-title" v-show="!showBar">
                        <i class="icon iconfont" @click="routerBack">&#xe72d;</i>
                        {{gamename}}
                        <i class="share iconfont" @click="share">&#xe633;</i>
                    </div>
                </div>
                <div class="top-bg" :style="{backgroundImage:'url(' + icon + ')'}"></div>
            </div>
            <div class="game-msg">
                <div class="game-box">
                    <div class="avator">
                        <img :src="icon">
                    </div>
                    <div class="gamename">{{gamename}}</div>
                    <div class="type">
                        <span>{{type}}</span> | <span>{{size | filterSize}}</span>
                    </div>
                    <div class="label" >
                        <span :style="{background:item.color}" v-for="(item,index) in welfareLabel" :key="index">{{item.name}}</span>
                    </div>
                </div>
            </div>
            
            <div class="game-container">
                <div class="tag">
                    <ul ref="tagScroll" :class="{scrollActive:barActive}">
                        <li @click="changeTab(0)" :class="{active:index==0}" >
                            <span>福利</span>
                        </li>
                        <li @click="changeTab(1)" :class="{active:index==1}">
                           <span>点评<i>{{commentNum}}</i></span>
                        </li>
                    </ul>
                </div>

                <div class="tabCon" v-show="index==0">
                    <div class="welfare wrapper" v-if="bt_welfare.length">
                        <div class="title">
                            <i class="icon iconfont">
                               &#xe600;
                            </i>
                            <span>变态福利</span>
                        </div>
                        <toggle-list :dataArr="bt_welfare" :type="2" :toggletxt="'查看全部福利'"></toggle-list>
                    </div>
                    <div class="intro wrapper">
                        <div class="title">
                            <i class="icon iconfont">
                               &#xefaf;
                            </i>
                            <span>游戏简介</span>
                        </div>
                        <div class="bannerPic">
                            <div  class="banner-scroll">
                                <div class="img" v-for="(item,index) in IntroPic" :key="index" @click="viewImages(index)">
                                    <img v-lazy="{src:item.image_url, loading: defaultImg}" alt="">
                                </div>
                            </div>
                        </div>
                        <toggle-list  :dataStr="gameDesc" :type="6" :toggletxt="'查看全部简介'"></toggle-list>
                    </div>
                    <div class="rebate wrapper" v-if="rechargeItems.length">
                        <div class="title">
                            <i class="icon iconfont">
                               &#xe60f;
                            </i>
                            <span>充值返利</span>
                            <router-link to="/rebate" class="rebate-btn" tag="span">申请返利</router-link>
                        </div>
                        <toggle-list :dataArr="rechargeItems" :type="1" :toggletxt="'查看全部返利'"></toggle-list>
                    </div>
                    <div class="server wrapper" v-if="serverItems.length">
                        <div class="title">
                            <i class="icon iconfont">
                               &#xe613;
                            </i>
                            <span>游戏开服</span>
                        </div>
                        <toggle-list :dataArr="serverItems" :type="3" :toggletxt="'查看全部开服'"></toggle-list>
                    </div>
                    <div class="gift wrapper" v-if="giftItems.length">
                        <div class="title">
                            <i class="icon iconfont">
                               &#xe627;
                            </i>
                            <span>游戏礼包</span>
                        </div>
                        <toggle-list :dataArr="giftItems" :type="4" @onview="giftDetail" :toggletxt="'查看全部礼包'"></toggle-list>
                    </div>
                    <div class="activity wrapper" v-if="gameActivity.length">
                        <div class="title">
                            <i class="icon iconfont">
                               &#xe611;
                            </i>
                            <span>独家活动</span>
                        </div>
                        <toggle-list  :dataArr="gameActivity" :type="5" :toggletxt="'查看全部活动'" :gameId="id"></toggle-list>
                    </div>
                    <!-- 没有更多显示 -->
                    <div class="loadlist">
                        <loadinglist  :more="false"></loadinglist>
                    </div>
                </div>
                <div class="tabCon" v-show="index==1">
                     <comment :commentObj="commentObj" :gameId="parseInt(id)"></comment>
                </div>
            </div>
            <div class="footer-menu">
                <div class="collect" v-if="is_collection==0" @click="collection_game">
                    <i class="icon collect-icon"></i>
                    <span>收藏</span>
                </div>
                <div class="collect" v-else @click="cancel_collection_game">
                    <i class="icon collected-icon"></i>
                    <span>已收藏</span>
                </div>
                <div class="down-btn" @click="down" ref="downBtn">
                    立即下载
                </div>
                <div class="comment"  @click="toPublish()">
                    <i class="icon iconfont">&#xe74c;</i>
                    <span>点评</span>
                </div>
            </div>
        </div>
        <van-popup v-model="show" class="showDetail">
            <div class="title">
                <span>
                    <i class="icon iconfont">&#xe627;</i>
                </span>
                礼包详情
            </div>
            <div class="main-con">
                <div class="text">
                    <div class="item">
                        <h3>
                            <i></i>礼包内容
                        </h3>
                        <p v-html="giftInfo.content"></p>
                    </div>
                    <div class="item">
                        <h3>
                            <i></i>使用说明
                        </h3>
                        <p v-if="giftInfo.exchange">
                            {{giftInfo.exchange}}
                        </p>
                        <p v-else>
                            无
                        </p>
                    </div>
                    <div class="item">
                        <h3>
                            <i></i>有效期
                        </h3>
                        <p>
                           {{giftInfo.start_time | filtertimestamp}} - {{giftInfo.end_time | filtertimestamp}}
                        </p>
                    </div>
                </div>
                <!-- <div class="btn" v-if="giftInfo.is_receive==0" @click="getGift(giftInfo)">
                    领取
                </div>
                <div class="btn" v-else  :data-clipboard-text="giftInfo.key||giftInfo.giftkey" @click='copy' id="copy">
                    复制
                </div> -->
            </div>
            <div class="close" @click="closeModel">
                <span>关闭</span>
            </div>
        </van-popup>
        <!-- 微信QQ提示 -->
        <down-model v-if="modalShow" :modalShow="modalShow" :isQQ="isQQ" :isweixin="isweixin" :notSafari="notSafari" @closeAlert="hideModel" ref="modal"></down-model>
        <!-- 请求加载 -->
        <requestLoading v-show="requestLoading"></requestLoading>
        <router-view ></router-view>
        <van-actionsheet v-model="shareModal" class="popModal">
            <ul>
                <li @click="copy" :data-clipboard-text="url" class="copyUrl">复制链接</li>
            </ul>
            <p @click="cancelModal">取消</p>
        </van-actionsheet>
        <!-- 二维码 弹窗-->
        <img :src="codeUrl" alt="" class="codeUrl" v-if="showModal">
    </div>
</template>

<script>
    import toggleList from './toggleList'
    import {gameDetail,receiveGift,gameDown,collection,cancel_collection,getCommentList} from 'api/game_box'
    import Loading from "common/loading"
    import Loadinglist from "common/LoadingList";
    import requestLoading from 'common/requestLoading'
    import {formatDate} from 'js/date'
    import downModel from 'common/downModel'
    import comment from './comment'
    import Clipboard from 'clipboard'
    import { Toast,ImagePreview } from 'vant'
    import {mapState,mapMutations} from 'vuex' 
    import {logStatus} from 'api/login'
    export default {
        name:"gameDetail",
        data(){
            return{
                defaultImg:require('../../assets/image/bannerDefault.png'),
                id:'',           //游戏id
                show:false,      //领取礼包弹出框
                barActive:false, //监听滚动
                height:'',       //tab距离顶部的位置
                showBar:true,    //监听header滚动
                index:0,         //初始化tab切换
                icon:[],         //游戏icon
                gamename:"",     //游戏名字
                type:[],         //游戏类型
                size:[],         //游戏大小
                welfareLabel:[], //游戏标签
                bt_welfare:"",   //变态福利
                rechargeItems:[], //充值返利
                serverItems:[], //游戏开服
                giftItems:[],     //游戏礼包
                gameActivity:[],  //是否收藏
                is_collection:0,
                IntroPic:[],
                gameDesc:"",
                giftInfo:{},     //礼包说明
                requestComplete:false,
                modalShow:false, //点击下载
                isQQ:false,
                isweixin:false,
                notSafari:false,
                requestLoading:false,
                platform:1,
                commentObj:{}, //评论列表
                commentNum:0,
                instance:'',
                shareModal:false,
                url:'',
                codeUrl:'',
                showModal:false
            }
        },
        created(){
            if(this.$route.query.index){
                this.index=this.$route.query.index;
            }
            this.init();
        },
        methods:{
            init(){
                this.id=this.$route.params.id||this.$route.query.gameId;
                gameDetail(this.id).then(res=>{
                    if(res.status==200){
                        this.requestComplete=true;
                    }
                    if(res.data.error==0){
                        res=res.data.content;
                        this.id=res.id;
                        this.icon=res.game_icon;
                        this.gamename=res.gamename;
                        this.type=res.type;
                        this.size=res.size;
                        this.welfareLabel=res.welfare.slice(0,3);
                        this.bt_welfare=res.bt_welfare;
                        this.rechargeItems=res.recharge_Rebate;
                        this.giftItems=res.game_gift;
                        this.gameActivity=res.game_activity;
                        this.IntroPic=res.pictures;
                        this.gameDesc=res.description;
                        this.is_collection=res.is_collection;
                        this.serverItems=res.game_open;
                        this.commentNum=res.number;  
                    }
                })
                getCommentList(this.id,"","").then(res=>{
                     if(res.data.error==0){
                        this.commentObj=res.data;
                     }
                })
            },
            viewImages(index){
                let images=[];
                this.IntroPic.forEach((item)=>{
                   images.push(item.image_url);
                })
                this.instance=ImagePreview({images,startPosition:index});
                this.$nextTick(()=>{
                     document.getElementsByClassName('van-image-preview')[0].addEventListener('click',this.clickImg);
                })
            },
            clickImg(){
              this.instance.close();
            },
            changeTab(num){
                this.index=num;
                let top= document.documentElement.scrollTop||document.body.scrollTop;
                if(top>=this.height){
                    this.$nextTick(()=>{
                        document.body.scrollTop = document.documentElement.scrollTop = this.height;
                    })
                }
            },
            handleScroll(){
              let top= document.documentElement.scrollTop||document.body.scrollTop;
              if(top>50){
                this.showBar=false;
              }else{
                 this.showBar=true;
              }
              if(top>=this.height){
                  this.barActive=true;
              }else if(top<this.height){
                  this.barActive=false;
              }
            },
            giftDetail(msg){   //查看礼包详情
                this.show=true;
                this.giftInfo=msg;
            },
            getGift(item){   //领取礼包
                let id=item.id;
                receiveGift(id).then(res=>{
                    if(res.data.error==0){
                       Toast('领取成功，请复制礼包码'); 
                       res=res.data.content;
                       item.giftkey=res.key;
                       item.remainder--;
                       item.is_receive=1;
                    }      
                })
            },
            copy(){
                let clipboard = new Clipboard('.copyUrl');
                clipboard.on('success', e => {
                    Toast.success('复制成功');
                    // 释放内存
                    clipboard.destroy()
                });
                clipboard.on('error', e => {
                    // 不支持复制
                    Toast.fail('该浏览器不支持自动复制');
                    // 释放内存
                    clipboard.destroy()
                });
            },
            share(){
                if(this.loginInfo){
                    this.url=window.location.href;
                    this.shareModal=true;
                }
                else{
                    this.$router.push({
                        path: '/login',
                        query: {redirect: this.$router.currentRoute.fullPath}
                    })
                }  
                
            },
            cancelModal(){
                this.shareModal=false;
            },
            closeModel(){
                this.show=false;
            },
            getUrlVar(name){ 
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars[hash[0]] = hash[1];
                }
                return vars[name];
            },
            IsPc(){
                let userAgentInfo = navigator.userAgent;
                let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
                let flag = true;
                for (let v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            },
            down(){
                var u = navigator.userAgent, app = navigator.appVersion;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isAndroid) {
                    this.platform=1;
                    let ua = navigator.userAgent.toLowerCase();
                    if(isAndroid&&ua.match(/qq\//i) == 'qq/'){
                        //qq内置浏览器
                        this.modalShow=true;
                        this.isQQ = true;
                        return;
                    }else if(isAndroid&&ua.match(/MicroMessenger/i) == 'micromessenger'){
                        //微信浏览器
                        this.modalShow=true;
                        this.isweixin = true;
                        return;
                    }
                }
                if (isIOS) {
                    let ua = navigator.userAgent.toLowerCase();
                    if(isIOS&&ua.match(/qq\//i) == 'qq/'){
                        //qq内置浏览器
                        this.modalShow=true;
                        this.notSafari=true;
                        return;
                    }else if(isIOS&&ua.match(/MicroMessenger/i) == 'micromessenger'){
                        //微信浏览器
                        this.modalShow=true;
                        this.notSafari=true;
                        return;
                    }else{
                        this.platform=2;
                    }
                }
                if(this.getUrlVar("agent")){
                    var agent=this.getUrlVar("agent")
                }else{
                    var agent='default'
                }
                    gameDown(this.id,agent,this.platform).then(res=>{
                    if(res.data.error==0){
                        res=res.data.content;
                        let url=res;
                        if(url){
                             window.location.href=url;
                        }
                    }
                })
            },
            hideModel(msg){
                this.modalShow=false;
            },
            collection_game(){
                this.requestLoading=true;
                collection(this.id).then(res=>{
                    this.requestLoading=false;
                    if(res.data.error==0){
                        this.is_collection=1;
                    }
                })
            },
            cancel_collection_game(){
                this.requestLoading=true;
                cancel_collection(this.id).then(res=>{
                    this.requestLoading=false;
                    if(res.data.error==0){
                        this.is_collection=0;
                    }
                })
            },
            routerBack(){
               window.removeEventListener('scroll', this.handleScroll);
               if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            },
            toPublish(){
                logStatus().then(res=>{
                   if (res.data.error == 0) {
                       this.$router.push({
                            path:'/gameDetail/publish',query:{gameId:this.id}
                        });
                   }else{
                        this.$router.push({
                        path: '/login',
                        query: {redirect:  this.$router.currentRoute.fullPath}
                    })
                   }
                  
                })
            },
            ...mapMutations(['SET_RELOAD'])
        },
        computed:{
           ...mapState(['gameUrl','isReload','loginInfo'])
        },
        filters:{
            filterSize(size){
                let newSize=size/(1024*1024)
                return `${newSize.toFixed(2)}M`;
            },
            filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy.MM.dd');
            }  
        },
        components:{
            toggleList,
            Loadinglist,
            Loading,
            downModel,
            comment,
            requestLoading
        },
        watch: {
            $route(to){
                if(this.isReload){
                    this.index=1;
                    getCommentList(this.id,"","").then(res=>{
                        if(res.data.error==0){
                            this.commentNum=res.data.content.total;
                            this.commentObj=res.data;
                        }
                    });
                    this.SET_RELOAD(false);
                    setTimeout(()=>{
                        this.$nextTick(()=>{
                            document.documentElement.scrollTop = document.body.scrollTop = this.height;
                        })
                    },10)
                }
            },
        },
         mounted () {
           window.addEventListener('scroll', this.handleScroll);
           this.$refs.downBtn.addEventListener("mouseover",(e)=>{
               e.stopPropagation()
               if(this.IsPc()){
                    let url=encodeURI(window.location.href);
                    this.codeUrl=`http://www.17byh.com/api.php?s=/qr/index&gid=0&w=200&h=200&t=${url}`;
                    this.showModal=true;
                }
           })
           this.$refs.downBtn.addEventListener("mouseleave",(e)=>{
               e.stopPropagation()
               if(this.IsPc()){
                   this.showModal=false;
               }
           })
           this.$nextTick(()=>{
                this.height=this.$refs.tagScroll.offsetTop-this.$refs.navBar.offsetHeight;
           })
        },
        beforeDestroy(){
            Toast.clear();
        },
        destroyed (){
            if(this.instance){
                this.instance.close();
            }
            window.removeEventListener('scroll', this.handleScroll);
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss';
#gameDetail{
    background:#f5f5f5;
    overflow:scroll;
}
.top-bg{
    width:100%;
    height:3rem;
    background-size: cover;
    background-position: center;
    margin-top:-0.8rem;
    filter: blur(10px);
}
.nav{
    width:100%;
    height:0.8rem;
}
.nav-bar,.nav-bar-title{
    position: fixed;
    text-align:center;
    top: 0;
    width: 7.5rem;
    z-index: 99;
    height: 0.8rem;
    line-height: 0.8rem;
    .icon{
        position:absolute;
        left:0.2rem;
        padding:0 0.1rem;
        font-size:0.4rem;
        color:#fff;
    }
    .share{
        position:absolute;
        right:0.2rem;
        padding:0 0.1rem;
        font-size:0.4rem;
        color:#fff;
    }
}
.nav-bar-title{
    background:$color-focus;
    font-size:$font-size-l;
    color:#fff;
}
.game-msg{
    position:relative;
    width:100%;
    height:2.2rem;
    background:#fff;
    .game-box{
        position:absolute;
        top:-2rem;
        left:4%;
        width:92%;
        height:3.78rem;
        text-align:center;
        background:#fff;
        border-radius:10px;
        .avator{
            width:1.62rem;
            height:1.62rem;
            margin:0.4rem auto 0.26rem auto;
            img{
                width:1.62rem;
                height:1.62rem;
            }
        }
        .gamename{
            font-size:$font-size-l;
        }
        .type{
            line-height:0.5rem;
            color:#8e8d92;
            font-size:$font-size-m;
        }
        .label{
            margin-top:0.15rem;
            span{
                display:inline-block;
                padding: 0.02rem 0.1rem;
                color: #fff;
                margin: 0.02rem;
                border-radius: 4px;
                font-size: 9px;
            }
        }
    }
}
.game-container{
    margin-top:0.1rem;
    background:#fff;
    padding-bottom:1.36rem;
    .tag{
        width:100%;
        height:0.8rem;
    }
    .tag ul{
        display:flex;
        li{
            flex:1;
            text-align:center;
            height:0.78rem;
            line-height:0.78rem;
            border-bottom:1px solid #f2f2f2;
            span{
                position:relative;
                display:inline-block;
                height:100%;
                font-size:$font-size-m;
                i{
                    position:absolute;
                    top:0.1rem;
                    left:0.6rem;
                    padding:0 0.2rem;
                    height:0.36rem;
                    line-height:0.36rem;
                    background:#eee;
                    color:#666;
                    font-size:$font-size-s;
                    border-radius:0.18rem;
                }
            }
            &.active{
                span{
                    color:$color-focus;
                    border-bottom:2px solid $color-focus;
                }
            }
        }
    }
    .tabCon{
        overflow: hidden;
        .wrapper{
            padding:0 0.3rem 0.2rem 0.3rem;
            margin-top:0.2rem;
            border-bottom:1px solid #f2f2f2;
            .title{
                margin-bottom:0.1rem;
                .icon{
                    font-size:0.4rem;
                    color:$color-focus;
                }
                span{
                    font-size:$font-size-m;
                    font-weight:bold;
                }
            }
            .item-list{
                line-height:0.4rem;
            }
            .showMore{
                line-height:0.4rem;
                text-align: center;
                color:$color-focus;
                i{
                    vertical-align: middle;
                    font-size:$font-size-s;
                } 
            }
        }
        .loadlist{
            margin-top:0.2rem;
        }
        .rebate{
            .rebate-btn{
                float:right;
                margin-top:0.10rem;
                padding:0 0.1rem;
                font-weight:normal;
                color:$color-focus;
                border:1px solid $color-focus;
                border-radius:0.27rem;
                padding:0.1rem;
            }
        }
        .intro{
            .bannerPic{
                margin-bottom:0.1rem;
                overflow-x:scroll;
                width:100%;
            }
            .banner-scroll{
                overflow-y: hidden;
                height:4.54rem;
                white-space: nowrap;
                .img{
                    display: inline-block;
                    margin-right: 0.1rem;
                    width: 2.73rem;
                    height: 4.54rem;
                }
            }
        }
    }
}
.footer-menu{
    display:flex;
    align-items: center;
    position:fixed;
    z-index:999;
    bottom:0;
    width: 7.5rem;
    height:1.36rem;
    background:#f2f2f2;
    border-top:1px solid #f2f2f2;
    .collect,.comment{
        flex:1;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size:$font-size-m;
        span{
            display:block;
        }
        .icon{
            font-size:0.5rem;
            color:$color-focus;
        }
    }
    .collect{
        .icon{
            display: inline-block;
            width:0.5rem;
            height:0.5rem;
            background-size:100% 100%;
            &.collected-icon{
                @include bg-image('../../assets/image/icon_ysc');
            }
            &.collect-icon{
                @include bg-image('../../assets/image/icon_favorite');
            }
        }
    }
    .down-btn{
        width:5rem;
        height:0.9rem;
        line-height:0.9rem;
        text-align:center;
        border-radius:0.45rem;
        background:$color-focus;
        color:#fff;
        font-size:$font-size-l;
    }
}
.scrollActive{
    position: fixed;
    left:50%;
    transform: translateX(-50%);
    width:7.5rem;
    z-index: 999;
    top: 0.8rem;
    background: #fff;
}
.showDetail{
    width:7rem;
    margin:0 auto;
    height:auto;
    border-radius:5px;
    .title{
        height:0.94rem;
        line-height:0.94rem;
        font-size:$font-size-l;
        text-align: center;
        background:$color-focus;
        color:#fff;
        span{
            display:inline-block;
            vertical-align: top;
            margin-top:0.15rem;
            margin-right:0.2rem;
            width:0.64rem;
            height:0.64rem;
            line-height:0.64rem;
            background:#fff;
            border-radius:0.32rem;
            .icon{
                color:$color-focus;
                font-size:0.5rem;
            }
        }
    }
    .main-con{
        display:flex;
        padding-top:0.12rem;
        .text{
            flex:1;
            padding-left:0.35rem;
            .item{
                position:relative;
                padding-left: 0.3rem;
                margin-bottom:0.1rem;
                padding-right:.2rem;
                p{
                    line-height:0.4rem;
                    color:#8f8e94;
                }
            }
            .item:before{
                content: "";
                position: absolute;
                top: 0.14rem;
                left: 0;
                background-color: #fff;
                width: 0.12rem;
                height: 0.12rem;
                background:$color-focus;
            }
            h3{
                font-size: $font-size-m;
            }
        }
        .btn{
            margin:0 0.15rem 0 0.3rem;
            width: 1.1rem;
            height: 0.5rem;
            line-height: 0.5rem;
            background: #fed404;
            font-size: $font-size-m;
            text-align: center;
            color: #fff;
            border-radius: 0.25rem;
        }
    }
    .close{
        padding:0 0.24rem;
        height:0.78rem;
        line-height:0.78rem;
        text-align:center;
        span{
            display:block;
            width:100%;
            height:100%;
            border-top:1px solid #ddd;
        }
    }
}
.popModal{
    background:#dee3de;
    ul{
        li{
            position:relative;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            text-align: center;
            background-color: #fff;
            &:after{
                content: ' ';
                position: absolute;
                pointer-events: none;
                box-sizing: border-box;
                top: -50%;
                left: -50%;
                right: -50%;
                bottom: -50%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                border: 0 solid #eee;
                border-bottom-width: 1px;
            }
        }
    }
    p{
        margin-top:5px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        text-align: center;
        background-color: #fff;
    }
}
.codeUrl{
    position:fixed;
    bottom:2rem;
    left:50%;
    transform: translateX(-50%);
    width:200px;
    height:200px;
    background: #fff;
    z-index:999;
}
</style>